import Page from '@/app/Page';
import { useAppSelector } from '@/utils/hooks';
import _ from 'lodash';
import styles from './style.module.less'
import { getValueIfQualified } from 'magic-ui-react';
import AppNav from './AppNav';
import AppDrawer from './AppDrawer';
import GolbalPortal from '@/components/GolbalPortal';
const App = () => {
  const {
    background,
    conciseMode
  } = useAppSelector((state) => state.appConfig);

  const getBg = () => {
    return (
      <>
        <img
          alt='bg'
          className={styles.background}
          src={background.currentImage}
        />
        <div
          className={styles.bgBlur}
          style={{
            backdropFilter: `blur(${background.blur}px)`,
            ...getValueIfQualified({
              backgroundColor: `rgba(var(--design-rgba-near), 0.1)`,
            }, background.blur !== 0)
          }}
        ></div>
      </>
    )
  }

  return (
    <div className={styles.app}>
      {getBg()}
      <main className={styles.content}>
        <AppNav />
        <div className='w-full flex-1 flex justify-between overflow-hidden relative'>
          {!conciseMode && (
            <Page />
          )}
          <AppDrawer />
        </div>
      </main>

      <GolbalPortal />
    </div >
  )
}
export default App